<template>
	<view class="gradient-bg">
		<!-- 顶部导航栏 -->
		<view class="headBar">
			<view class="navBack" @click="goBack()">
				<uni-icons type="left" size="25"></uni-icons>
			</view>
			<view class="title">AI舌诊</view>
		</view>

		<!-- 遮罩层 -->
		<view class="mask" v-if="LookStatus || LookStatus2 || LookStatus3 || LookStatus4 || LookStatus5||codeStatus">
		</view>

		<view class="toungu-content">
			<!-- 头部部分 -->
			<view class="tongue-head">
				<view class="tongue-title">AI智能舌诊</view>

				<view class="detectNavigateArea">
					<view class="tongue-record" @click="goReport()">检测记录</view>
					<view class="icon">
						<uni-icons type="right" size="16" color=" rgba(13, 209, 203, 1)"></uni-icons>
					</view>
				</view>
			</view>

			<!-- 用户信息 -->
			<view class="tongue-middle">
				<view class="tongue-user">
					<view class="tongue-user-up">
						<view class="name">{{ userData.szCheckName }}</view>
						<view class="change" @click="changeUsr()">
							<view class="change-content">
								<view class="img"></view>
								<view class="change-people">切换检测人</view>
							</view>
						</view>
					</view>
					<view class="tongue-user-down">
						<view class="age">
							年龄
							<span class="age-num">{{ userData.szCheckAge }}</span>
						</view>
						<view class="gender">
							性别
							<span class="gender-sex">{{ userData.szCheckSex }}</span>
						</view>
						<view class="phone" v-if="userData.szCheckTel != ''">
							联系方式
							<span class="phone-num">{{ userData.szCheckTel }}</span>
						</view>
						<view class="phone" v-else>
							联系方式
							<span class="phone-num">-</span>
						</view>
					</view>
				</view>
			</view>

			<!-- 舌面传图 -->
			<view class="tongue-picture">
				<!-- 这是上面切换舌上和舌下的部分 实现切换-->
				<view class="tongue-top" :style="{ backgroundImage: currentBackground, height: currentHeight }">
					<view class="trapezoid">
						<view class="trapezoid-content">
							<view class="content-tongue" @click="changeBackground(1)" :style="{ color: szfontcolor }">
								舌象图</view>
							<view class="content-face" @click="changeBackground(2)" :style="{ color: fcfontcolor }">面部图
							</view>
						</view>
					</view>
					<view class="tongue-img-content" v-if="upTongue === 1 ? true : false">
						<view class="tongue-down">
							<view class="tongue-img">
								<view class="up">
									舌面图像
									<span class="upspan">(必传)</span>
								</view>
								<view class="look" @click="Open()">查看示例</view>
							</view>

							<view class="upload">
								<view class="content">
									<view class="uploads" @click="selectAndModifyPhoto(1)">
										<view class="upload-text" v-if="upURL ? true : false">重新上传</view>
										<view class="upload-text" v-if="upURL ? false : true">点击上传</view>
									</view>
									<view class="upload-img">
										<image :src="upURL" mode="widthFix"></image>
									</view>
								</view>
							</view>
						</view>
						<view class="tongue-down">
							<view class="tongue-img">
								<view class="up">
									舌下图像
									<span class="upspan">(选传)</span>
								</view>
								<view class="look" @click="Open2()">查看示例</view>
							</view>

							<view class="upload">
								<view class="content">
									<view class="uploads" @click="selectAndModifyPhoto(2)">
										<view class="upload-text" v-if="downURL ? true : false">重新上传</view>
										<view class="upload-text" v-if="downURL ? false : true">点击上传</view>
									</view>
									<view class="upload-img">
										<image :src="downURL" mode="widthFix"></image>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="face-img-content" v-if="upTongue === 2 ? true : false">
						<view class="tongue-down">
							<view class="tongue-img">
								<view class="up">
									正面图像
									<span class="upspan">(必传)</span>
								</view>
								<view class="look" @click="Open3()">查看示例</view>
							</view>

							<view class="upload" style="margin-left: -10rpx">
								<view class="content">
									<view class="uploads" @click="selectAndModifyPhoto(3)">
										<view class="upload-text" v-if="faceURL ? true : false">重新上传</view>
										<view class="upload-text" v-if="faceURL ? false : true">点击上传</view>
									</view>
									<view class="upload-img">
										<image :src="faceURL" mode="widthFix"></image>
									</view>
								</view>
							</view>
						</view>
						<view class="tongue-down">
							<view class="tongue-img">
								<view class="up">右侧面图像</view>
								<view class="look" @click="Open4()">查看示例</view>
							</view>

							<view class="upload">
								<view class="content">
									<view class="uploads" @click="selectAndModifyPhoto(4)">
										<view class="upload-text" v-if="facerightURL ? true : false">重新上传</view>
										<view class="upload-text" v-if="facerightURL ? false : true">点击上传</view>
									</view>
									<view class="upload-img">
										<image :src="facerightURL" mode="widthFix"></image>
									</view>
								</view>
							</view>
						</view>
						<view class="tongue-down">
							<view class="tongue-img">
								<view class="up">左侧面图像</view>
								<view class="look" @click="Open5()">查看示例</view>
							</view>

							<view class="upload">
								<view class="content">
									<view class="uploads" @click="selectAndModifyPhoto(5)">
										<view class="upload-text" v-if="faceleftURL ? true : false">重新上传</view>
										<view class="upload-text" v-if="faceleftURL ? false : true">点击上传</view>
									</view>
									<view class="upload-img">
										<image :src="faceleftURL" mode="widthFix"></image>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 以下是拍照注意事项 -->
			<view class="tongue-food">
				<!-- 供应商的模式 -->
				<view class="Old-submit" @click="ServerTest()" v-if="userType"></view>
				<!-- 普通用户的模式 -->

				<view @click="normolTest()" class="submit" v-else>
					立即诊断
					<text v-if="free">剩余{{ useNum }}次</text>
					<text v-else="pay && userType === false">￥9.9</text>
				</view>
				<view class="freeAttentiontext" v-if="userType === false">邀请新用户扫码绑定，可获得免费检测次数</view>

				<view class="redemptionCode" @click="showCodebox()">
					兑换
				</view>
			</view>


			<view class="tongue-attention">
				<view class="attention1">拍摄注意事项</view>
				<view class="attention2">光线：白天柔和自然光效果更佳，避免背光、曝光、偏暗</view>
				<view class="attention3">禁忌：食用有色饮食或药物、有色光源、饭后半小时、早晨起床</view>
			</view>
			<!-- 这是弹出提示框 -->

			<view class="look-content" v-if="LookStatus">
				<view class="title">舌面拍照示意图</view>
				<image src="https://zhinengjiayi.oss-cn-chengdu.aliyuncs.com/static/home/surface_tongue_sample.jpg"
					class="image"></image>
				<view class="descContent">
					<view class="descItem">· 张大嘴巴，露出舌根</view>
					<view class="descItem">· 舌体自然平展伸长</view>
					<view class="descItem">· 舌尖自然向下舒展</view>
				</view>
				<view class="desc-line"></view>
				<view class="close" @click="Close()" style="z-index: 9999999999999999">关闭</view>
			</view>

			<view class="look-content2" v-if="LookStatus2">
				<view class="title">舌下拍照示意图</view>
				<image src="https://zhinengjiayi.oss-cn-chengdu.aliyuncs.com/static/home/back_tongue_sample.jpg"
					class="image"></image>
				<view class="descContent">
					<view class="descItem">· 张大嘴巴，舌体向上颚方向翘起</view>
					<view class="descItem">· 舌尖自然轻抵上颚</view>
					<view class="descItem">· 伸舌自然放松</view>
				</view>
				<view class="desc-line"></view>
				<view class="close" @click="Close2()" style="z-index: 9999999999999999">关闭</view>
			</view>

			<view class="look-content3" v-if="LookStatus3">
				<view class="title">正面拍照示意图</view>
				<image src="https://zhinengjiayi.oss-cn-chengdu.aliyuncs.com/home/20240117-175320.png" class="image"
					mode="aspectFill"></image>
				<view class="descContent">
					<view class="descItem">· 正对摄像头，抬头正身面带微笑</view>
					<view class="descItem">· 面部无眼镜等遮挡面容物品</view>
					<view class="descItem">· 面部素净无浓妆</view>
				</view>
				<view class="desc-line"></view>
				<view class="close" @click="Close3()" style="z-index: 9999999999999999">关闭</view>
			</view>

			<view class="look-content4" v-if="LookStatus4">
				<view class="title">右侧面拍照示意图</view>
				<image src="https://zhinengjiayi.oss-cn-chengdu.aliyuncs.com/home/20240117-175332.png" class="image"
					mode="aspectFill"></image>
				<view class="descContent">
					<view class="descItem">· 端正头部，请将耳朵拍摄在照片内</view>
					<view class="descItem">· 面部无眼镜等遮挡面容物品</view>
					<view class="descItem">· 面部素净无浓妆</view>
				</view>
				<view class="desc-line"></view>
				<view class="close" @click="Close4()" style="z-index: 9999999999999999">关闭</view>
			</view>

			<view class="look-content5" v-if="LookStatus5">
				<view class="title">左侧面拍照示意图</view>
				<image src="https://zhinengjiayi.oss-cn-chengdu.aliyuncs.com/home/20240117-175326.png" class="image"
					mode="aspectFill"></image>
				<view class="descContent">
					<view class="descItem">· 端正头部，请将耳朵拍摄在照片内</view>
					<view class="descItem">· 面部无眼镜等遮挡面容物品</view>
					<view class="descItem">· 面部素净无浓妆</view>
				</view>
				<view class="desc-line"></view>
				<view class="close" @click="Close5()" style="z-index: 9999999999999999">关闭</view>
			</view>

			<!-- 兑换码弹出框 -->
			<view class="redemptionCode_box" v-if="codeStatus">
				<view class="box_title">
					检测次数兑换
				</view>
				<input class="inputCode" placeholder="兑换码输入" type="text" style="
					padding-left: 50rpx;font-size: 32rpx;" />
				<view class="Btns">
					<view class="btn btn1" @click="showCodebox()">
						取消
					</view>
					<view class="btn btn2">
						确认
					</view>
				</view>
			</view>
		</view>

		<view class="background"></view>
	</view>
</template>

<script>
	import * as HomeApi from '@/api/home/home.js';
	import * as TongueApi from '@/api/tongue/tongue.js';
	import * as PayApi from '@/api/pay/pay.js';
	let lastRequestTime = 0;
	const requestInterval = 1000; // 设置请求的最小间隔时间，例如1000毫秒
	export default {
		onLoad(options) {
			this.resetData();
			this.getUsermessage(); //先获取信息
			this.UserType(); //判断用户类型
		},
		onShow() {
			if (this.$globalData.isRefresh === true) {
				this.resetData();
				this.getUsermessage(); //先获取信息
				this.UserType(); //判断用户类型
				this.$globalData.isRefresh = false;
				console.log('刷新了');
			}
		},
		data() {
			return {
				szfontcolor: 'black',
				fcfontcolor: 'white',
				currentHeight: '730rpx',
				currentBackground: 'url(https://zhinengjiayi.oss-cn-chengdu.aliyuncs.com/home/%E8%88%8C%E8%B1%A1%E6%A3%80%E6%B5%8B%E5%8D%A1%E7%89%87.png)',
				userType: false, //判断用户类型为普通用户和供应商
				useNum: null, //检测次数
				LookStatus: false,
				LookStatus2: false,
				LookStatus3: false,
				LookStatus4: false,
				LookStatus5: false,
				codeStatus: false, //兑换码盒子的控制
				upTongue: 1,
				downpTongue: false,
				free: false,
				pay: false,
				upURL: '',
				downURL: '',
				faceURL: '',
				faceleftURL: '',
				facerightURL: '',
				flag: 0, //判断调取舌诊接口还是面诊
				//这里是提交舌诊图片的信息
				tongueImage: {
					szReportId: null,
					szCheckTopImgUrl: '',
					szCheckBackImgUrl: '',
					szCheckAge: '',
					szCheckSex: ''
				},
				faceImage: {
					szReportId: null,
					faceFrontImgUrl: '',
					faceLeftImgUrl: '',
					faceRightImgUrl: '',
					szCheckAge: '',
					szCheckSex: ''
				},
				//这里是获得用户的信息进行渲染
				userData: {
					id: null,
					szCheckAge: '',
					szCheckName: '',
					szCheckSex: '',
					szCheckTel: '',
					szCheckTopImgUrl: '',
					szCheckBackImgUrl: '',
					wxUserStatus: 0,
					wxUserYzRemain: 1
				},
				//请求绑定微信的参数
				scene: '',
				iStatusBarHeight: null,
				faceReturn: null
			};
		},
		mounted() {
			this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
		},
		methods: {
			changeBackground(imageNumber) {
				if (imageNumber === 1) {
					this.currentBackground =
						'url(https://zhinengjiayi.oss-cn-chengdu.aliyuncs.com/home/%E8%88%8C%E8%B1%A1%E6%A3%80%E6%B5%8B%E5%8D%A1%E7%89%87.png)';
					this.currentHeight = '730rpx';
					this.upTongue = 1;
					this.szfontcolor = 'black';
					this.fcfontcolor = 'white';
				} else if (imageNumber === 2) {
					this.currentBackground =
						'url(https://zhinengjiayi.oss-cn-chengdu.aliyuncs.com/home/%E8%88%8C%E8%B1%A1%E6%A3%80%E6%B5%8B%E5%8D%A1%E7%89%87-2.png)';
					this.currentHeight = '950rpx';
					this.upTongue = 2;
					this.szfontcolor = 'white';
					this.fcfontcolor = 'black';
				}
			},
			//重置数据
			resetData() {
				Object.assign(this.$data, this.$options.data.call(this));
			},

			goBack() {
				uni.$toPage('/pages/home/home', {}, false, true);
			},
			//获取云诊用户信息
			async getUsermessage() {
				const res = await HomeApi.getUsermessage();
				const resData = res.data.data;
				// console.log('获取云诊用户中的云诊剩余次数')
				console.log(res);
				this.useNum = resData.wxUserYzRemain;
				if (this.useNum > 0) {
					this.pay = false;
					this.free = true;
				} else {
					this.pay = true;
					this.free = false;
				}
				this.userData = resData;
				this.tongueImage.szCheckAge = this.userData.szCheckAge;
				this.tongueImage.szCheckSex = this.userData.szCheckSex;
				this.tongueImage.szReportId = this.userData.id;
				this.faceImage.szReportId = this.userData.id;
				this.faceImage.szCheckAge = this.userData.szCheckAge;
				this.faceImage.szCheckSex = this.userData.szCheckSex;
			},

			//判断用户
			async UserType() {
				const res = await TongueApi.userType();
				// console.log(res)
				const wxUserStatus = res.data.data.wxUserStatus; //用户类型
				if (wxUserStatus === 1 || wxUserStatus === 2) {
					//显示供应商按钮
					console.log('供应商');
					this.userType = true;
				} else if (wxUserStatus === 0) {
					//显示普通用户的按钮
					console.log('普通用户');
					this.userType = false;
					// if()
				}
			},


			// 上传舌诊照片和面诊照片
			async selectAndModifyPhoto(e) {
				const url = await uni.$chooseImage();
				if (url && e === 1) {
					uni.hideLoading();
					uni.$showMsg('上传成功');
					this.upURL = url;
					this.tongueImage.szCheckTopImgUrl = this.upURL;
				} else if (url && e === 2) {
					uni.hideLoading();
					uni.$showMsg('上传成功');
					this.downURL = url;
					this.tongueImage.szCheckBackImgUrl = this.downURL;
				} else if (url && e === 3) {
					uni.hideLoading();
					uni.$showMsg('上传成功');
					this.faceURL = url;
					this.faceImage.faceFrontImgUrl = this.faceURL;
				} else if (url && e === 4) {
					uni.hideLoading();
					uni.$showMsg('上传成功');
					this.facerightURL = url;
					this.faceImage.faceRightImgUrl = this.facerightURL;
				} else if (url && e === 5) {
					uni.hideLoading();
					uni.$showMsg('上传成功');
					this.faceleftURL = url;
					this.faceImage.faceLeftImgUrl = this.faceleftURL;
				}
			},

			//切换就诊人
			changeUsr() {
				uni.$toPage('/subpkg/AIdiagnos/TestmanMessage/TestmanMessage', {
					flag: 1
				});
			},

			//提交舌诊信息进入审核阶段
			async GoTo() {
				//这里提交到审核
				const res = await TongueApi.Test(this.tongueImage);

				if (res.code === 2609002) {
					uni.$showMsg('单据重复请重新填写');

					uni.$toPage('/subpkg/AIdiagnos/TestmanMessage/TestmanMessage');
				} else {
					uni.$toPage('/subpkg/AIdiagnos/CheckTongue/CheckTongue', {
						tongueImage: this.tongueImage,
						faceImage: this.faceImage,
						data: res.data.data
					});
				}
			},
			//提交面诊信息进入审核阶段
			async GoToface() {
				//这里提交到审核
				const res = await TongueApi.faceTest(this.faceImage);
				console.log(res);

				if (res.code === 2609002) {
					uni.$showMsg('单据重复请重新填写');

					uni.$toPage('/subpkg/AIdiagnos/TestmanMessage/TestmanMessage');
				}
			},

			// 普通人舌诊检测//微信支付步骤
			async normolTest() {
				const currentTime = new Date().getTime();
				if (currentTime - lastRequestTime < requestInterval) {
					return uni.$showMsg('操作过于频繁'); // 这将阻止请求继续执行
				}

				lastRequestTime = currentTime; // 更新上一次请求时间
				console.log('触发次数');
				//先判断诊断条件

				if (this.tongueImage.szCheckTopImgUrl != '') {
					if (this.faceImage.faceLeftImgUrl === '' && this.faceImage.faceRightImgUrl === '' && this.faceImage
						.faceFrontImgUrl === '') {
						this.flag = -1; //就只调舌诊
					} else if (this.faceImage.faceFrontImgUrl === '') {
						return uni.$showMsg('若要进行面部检测，请上传正面图像');
					} else {
						this.flag = 1; //舌诊面诊一起调
					}
				} else {
					this.changeBackground(1);
					return uni.$showMsg('请至少上传一张舌面图像');
				}

				if (this.free) {
					if (this.flag === -1) {
						this.GoTo();
					} else {
						this.GoToface();
						this.GoTo();
					}
				} else {
					//这里就要跑支付逻辑
					const payRes = await PayApi.payYzMoney();
					console.log(payRes);
					if (payRes.data.code === 200) {
						let orderResponseData = payRes.data.data.stringStringMap;
						console.log('支付的数据');
						//这里是异步的不能直接赋值，要用PROMISE对象联合.then
						uni.$WxPay(orderResponseData)
							.then((response) => {
								// 支付成功的处理
								if (this.flag === -1) {
									this.GoTo();
								} else {
									this.GoToface();
									this.GoTo();
								}
							})
							.catch((error) => {
								return uni.$showMsg('支付取消');
							});
					} else {
						return uni.$showMsg('支付出错请重试');
					}
				}
			},

			//服务商检测
			ServerTest() {
				const currentTime = new Date().getTime();
				if (currentTime - lastRequestTime < requestInterval) {
					return uni.$showMsg('操作过于频繁'); // 这将阻止请求继续执行
				}

				lastRequestTime = currentTime; // 更新上一次请求时间
				console.log('触发次数');
				//先判断诊断条件

				if (this.tongueImage.szCheckTopImgUrl != '') {
					if (this.faceImage.faceLeftImgUrl === '' && this.faceImage.faceRightImgUrl === '' && this.faceImage
						.faceFrontImgUrl === '') {
						this.flag = -1; //就只调舌诊
					} else if (this.faceImage.faceFrontImgUrl === '') {
						return uni.$showMsg('若要进行面部检测，请上传正面图像');
					} else {
						this.flag = 1; //舌诊面诊一起调
					}
				} else {
					this.changeBackground(1);
					return uni.$showMsg('请至少上传一张舌面图像');
				}

				if (this.flag === -1) {
					lastRequestTime = currentTime; // 更新上一次请求时间
					this.GoTo();
				} else {
					lastRequestTime = currentTime; // 更新上一次请求时间
					this.GoToface();
					this.GoTo();
				}
			},

			//查看检测报告
			goReport() {
				uni.$toPage('/subpkg/AIdiagnos/DetectionRecord/DetectionRecord', {
					wxid: this.userData.id
				});
			},

			//弹出提示框
			Open() {
				this.LookStatus = true;
			},
			Close() {
				this.LookStatus = false;
			},
			//弹出提示框
			Open2() {
				this.LookStatus2 = true;
			},
			Close2() {
				this.LookStatus2 = false;
			},
			Open3() {
				this.LookStatus3 = true;
			},
			Close3() {
				this.LookStatus3 = false;
			},
			Open4() {
				this.LookStatus4 = true;
			},
			Close4() {
				this.LookStatus4 = false;
			},
			Open5() {
				this.LookStatus5 = true;
			},
			Close5() {
				this.LookStatus5 = false;
			},
			showCodebox() {
				this.codeStatus = !this.codeStatus;
			},

		}
	};
</script>

<style lang="scss">
	.gradient-bg {
		height: 100vh;
		overflow: hidden;
		display: flex;
		flex-wrap: wrap;

		// 遮罩层
		.mask {
			position: absolute;
			background-color: rgba(0, 0, 0, 0.25);
			width: 100vw;
			height: 100vh;
			// height: calc(100vh - 100rpx);
			z-index: 99999999;
		}

		// 背景区域
		.background {
			z-index: -1;
			position: absolute;
			left: -300rpx;
			top: 0rpx;
			width: 100vw;
			height: 1080rpx;
			opacity: 1;
			background: linear-gradient(to bottom right, rgba(212, 187, 157, 0.41), rgba(255, 255, 255, 0));
			filter: blur(200rpx);
		}

		.headBar {
			z-index: 9999999999999999999;
			display: flex;
			justify-content: center;
			align-items: flex-end;
			height: 9vh;
			width: 100vw;
			box-sizing: border-box;

			.title {
				margin-left: 20rpx;

				font-size: 30rpx;
				font-weight: 600;
			}

			.navBack {
				margin-left: -590rpx;
				width: 581rpx;
				height: 58rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				box-sizing: border-box;
			}
		}

		.toungu-content {
			padding-bottom: 100rpx;
			margin-top: 40rpx;
			height: calc(91vh - 40rpx);
			overflow: auto;

			.look-content {
				background-color: #fff;
				position: absolute;
				left: 76rpx;
				top: 512rpx;
				width: 600rpx;
				height: 658rpx;
				opacity: 1;
				border-radius: 14rpx;
				background: rgba(255, 255, 255, 1);
				z-index: 999999999;
				display: flex;
				align-items: center;
				flex-direction: column;

				.title {
					font-size: 28rpx;
					font-weight: 600;
					margin-top: 30rpx;
				}

				.image {
					width: 250rpx;
					height: 250rpx;
					opacity: 1;
					border-radius: 14rpx;
					margin-top: 50rpx;
				}

				.descContent {
					margin-top: 20rpx;
					display: flex;
					align-items: center;
					flex-direction: column;

					.descItem {
						height: 42rpx;
						color: rgba(85, 85, 87, 1);
						font-size: 28rpx;
						font-weight: 400;
					}
				}

				.desc-line {
					margin-top: 25rpx;
					width: 484rpx;
					border-top: 1rpx solid rgba(167, 167, 167, 1);
				}

				.close {
					margin-top: 30rpx;
					font-size: 30rpx;
					font-weight: 400;
					letter-spacing: 0rpx;
					line-height: 46.34rpx;
					color: rgba(0, 0, 0, 1);
					text-align: left;
					vertical-align: top;
					font-weight: 600;
				}
			}

			.look-content2 {
				background-color: #fff;
				position: absolute;
				left: 76rpx;
				top: 512rpx;
				width: 600rpx;
				height: 658rpx;
				opacity: 1;
				border-radius: 14rpx;
				background: rgba(255, 255, 255, 1);
				z-index: 999999999;
				display: flex;
				align-items: center;
				flex-direction: column;

				.title {
					font-size: 28rpx;
					font-weight: 600;
					margin-top: 30rpx;
				}

				.image {
					width: 250rpx;
					height: 250rpx;
					opacity: 1;
					border-radius: 14rpx;
					margin-top: 50rpx;
				}

				.descContent {
					margin-top: 20rpx;
					display: flex;
					align-items: center;
					flex-direction: column;

					.descItem {
						height: 42rpx;
						color: rgba(85, 85, 87, 1);
						font-size: 28rpx;
						font-weight: 400;
					}
				}

				.desc-line {
					margin-top: 25rpx;
					width: 484rpx;
					border-top: 1rpx solid rgba(167, 167, 167, 1);
				}

				.close {
					margin-top: 30rpx;
					font-size: 30rpx;
					font-weight: 400;
					letter-spacing: 0rpx;
					line-height: 46.34rpx;
					color: rgba(0, 0, 0, 1);
					text-align: left;
					vertical-align: top;
					font-weight: 600;
				}
			}

			.look-content3 {
				background-color: #fff;
				position: absolute;
				left: 76rpx;
				top: 512rpx;
				width: 600rpx;
				height: 658rpx;
				opacity: 1;
				border-radius: 14rpx;
				background: rgba(255, 255, 255, 1);
				z-index: 999999999;
				display: flex;
				align-items: center;
				flex-direction: column;

				.title {
					font-size: 28rpx;
					font-weight: 600;
					margin-top: 30rpx;
				}

				.image {
					width: 250rpx;
					height: 250rpx;
					opacity: 1;
					border-radius: 14rpx;
					margin-top: 50rpx;
				}

				.descContent {
					margin-top: 20rpx;
					display: flex;
					align-items: center;
					flex-direction: column;

					.descItem {
						height: 42rpx;
						color: rgba(85, 85, 87, 1);
						font-size: 28rpx;
						font-weight: 400;
					}
				}

				.desc-line {
					margin-top: 25rpx;
					width: 484rpx;
					border-top: 1rpx solid rgba(167, 167, 167, 1);
				}

				.close {
					margin-top: 30rpx;
					font-size: 30rpx;
					font-weight: 400;
					letter-spacing: 0rpx;
					line-height: 46.34rpx;
					color: rgba(0, 0, 0, 1);
					text-align: left;
					vertical-align: top;
					font-weight: 600;
				}
			}

			.look-content4 {
				background-color: #fff;
				position: absolute;
				left: 76rpx;
				top: 512rpx;
				width: 600rpx;
				height: 658rpx;
				opacity: 1;
				border-radius: 14rpx;
				background: rgba(255, 255, 255, 1);
				z-index: 999999999;
				display: flex;
				align-items: center;
				flex-direction: column;

				.title {
					font-size: 28rpx;
					font-weight: 600;
					margin-top: 30rpx;
				}

				.image {
					width: 250rpx;
					height: 250rpx;
					opacity: 1;
					border-radius: 14rpx;
					margin-top: 50rpx;
				}

				.descContent {
					margin-top: 20rpx;
					display: flex;
					align-items: center;
					flex-direction: column;

					.descItem {
						height: 42rpx;
						color: rgba(85, 85, 87, 1);
						font-size: 28rpx;
						font-weight: 400;
					}
				}

				.desc-line {
					margin-top: 25rpx;
					width: 484rpx;
					border-top: 1rpx solid rgba(167, 167, 167, 1);
				}

				.close {
					margin-top: 30rpx;
					font-size: 30rpx;
					font-weight: 400;
					letter-spacing: 0rpx;
					line-height: 46.34rpx;
					color: rgba(0, 0, 0, 1);
					text-align: left;
					vertical-align: top;
					font-weight: 600;
				}
			}

			.look-content5 {
				background-color: #fff;
				position: absolute;
				left: 76rpx;
				top: 512rpx;
				width: 600rpx;
				height: 658rpx;
				opacity: 1;
				border-radius: 14rpx;
				background: rgba(255, 255, 255, 1);
				z-index: 999999999;
				display: flex;
				align-items: center;
				flex-direction: column;

				.title {
					font-size: 28rpx;
					font-weight: 600;
					margin-top: 30rpx;
				}

				.image {
					width: 250rpx;
					height: 250rpx;
					opacity: 1;
					border-radius: 14rpx;
					margin-top: 50rpx;
				}

				.descContent {
					margin-top: 20rpx;
					display: flex;
					align-items: center;
					flex-direction: column;

					.descItem {
						height: 42rpx;
						color: rgba(85, 85, 87, 1);
						font-size: 28rpx;
						font-weight: 400;
					}
				}

				.desc-line {
					margin-top: 25rpx;
					width: 484rpx;
					border-top: 1rpx solid rgba(167, 167, 167, 1);
				}

				.close {
					margin-top: 30rpx;
					font-size: 30rpx;
					font-weight: 400;
					letter-spacing: 0rpx;
					line-height: 46.34rpx;
					color: rgba(0, 0, 0, 1);
					text-align: left;
					vertical-align: top;
					font-weight: 600;
				}
			}

			//兑换码框
			.redemptionCode_box {
				position: absolute;
				left: 76rpx;
				top: 656rpx;
				z-index: 999999999;
				width: 602rpx;
				height: 312rpx;
				border-radius: 14rpx;
				background: #FFFFFF;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-around;
				padding-bottom: 40rpx;

				.box_title {
					font-size: 32rpx;
					font-weight: 600;
				}

				.inputCode {
					width: 480rpx;
					height: 88rpx;
					border-radius: 45rpx;
					background: #F3F3F5;

				}

				.Btns {
					width: 70%;
					display: flex;
					align-items: center;
					justify-content: space-around;

					.btn {
						width: 158rpx;
						height: 54rpx;
						border-radius: 18rpx;
						text-align: center;
						line-height: 54rpx;
					}

					.btn1 {
						border: 1rpx solid #DFA13C;
						font-size: 24rpx;
						font-weight: 500;
						color: #DFA13C;
					}

					.btn2 {
						background: #DFA13C;
						font-size: 24rpx;
						font-weight: 500;
						color: #FFFFFF;
					}
				}
			}

			// <!-- 头部部分
			.tongue-head {
				margin-left: 30rpx;
				display: flex;

				.tongue-title {
					margin-left: 10rpx;
					height: 58rpx;
					opacity: 1;
					font-size: 40rpx;
					font-weight: 700;
				}

				.detectNavigateArea {
					display: flex;
					align-items: center;
					flex-direction: row;
					margin-left: 333rpx;

					.tongue-record {
						font-size: 28rpx;
						font-weight: 400;
						letter-spacing: 0rpx;
						color: rgba(13, 209, 203, 1);
					}

					.icon {}
				}
			}

			// 第二部分
			// <!-- 用户信息 -->
			.tongue-middle {
				margin-top: 40rpx;
				margin-left: 30rpx;

				.tongue-user {
					width: 694rpx;
					height: 200rpx;
					opacity: 1;
					border-radius: 14rpx;
					background: rgba(255, 255, 255, 1);
					display: flex;
					flex-wrap: wrap;

					.tongue-user-up {
						width: 100%;
						display: flex;
						justify-content: space-between;

						.name {
							margin-top: 35rpx;
							margin-left: 50rpx;
							opacity: 1;
							/** 文本1 */
							font-size: 36rpx;
							font-weight: 500;
						}

						.change {
							margin-top: 20rpx;
							margin-right: 20rpx;
							width: 240rpx;
							height: 62rpx;
							opacity: 1;
							border-radius: 6rpx;
							background: rgba(243, 243, 245, 1);
							display: flex;
							justify-content: space-evenly;
							align-items: center;

							.change-content {
								width: 80%;
								display: flex;
								justify-content: space-around;
								align-items: center;

								.img {
									width: 22rpx;
									height: 24rpx;
									background-size: 100% auto;
									background-image: url('https://zhinengjiayi.oss-cn-chengdu.aliyuncs.com/home/%E5%88%87%E6%8D%A2ICON.png');
									background-repeat: no-repeat;
								}

								.change-people {
									font-size: 28rpx;
									font-weight: 400;
									color: rgba(0, 0, 0, 1);
									text-align: left;
									vertical-align: top;
								}
							}
						}
					}

					.tongue-user-down {
						width: 100%;
						display: flex;
						justify-content: space-between;
						margin-top: 35rpx;
						margin-left: 50rpx;
						margin-bottom: 20rpx;

						.age {
							font-size: 28rpx;
							font-weight: 400;
							letter-spacing: 0rpx;
							line-height: 40.54rpx;
							color: rgba(85, 85, 87, 1);

							.age-num {
								/** 文本2 */
								margin-left: 10rpx;
								font-size: 28rpx;
								font-weight: 400;
								letter-spacing: 0rpx;
								line-height: NaNrpx;
								color: rgba(0, 0, 0, 1);
								text-align: left;
								vertical-align: top;
							}
						}

						.gender {
							font-size: 28rpx;
							font-weight: 400;
							letter-spacing: 0rpx;
							line-height: 40.54rpx;
							color: rgba(85, 85, 87, 1);

							.gender-sex {
								/** 文本2 */
								margin-left: 10rpx;
								font-size: 28rpx;
								font-weight: 400;
								letter-spacing: 0rpx;
								line-height: NaNrpx;
								color: rgba(0, 0, 0, 1);
								text-align: left;
								vertical-align: top;
							}
						}

						.phone {
							width: 310rpx;
							/** 文本1 */
							font-size: 28rpx;
							font-weight: 400;
							letter-spacing: 0rpx;
							line-height: 40.54rpx;
							color: rgba(85, 85, 87, 1);
							text-align: left;
							vertical-align: top;

							.phone-num {
								margin-left: 10rpx;
							}
						}
					}
				}
			}

			// 第三部分
			.tongue-picture {
				box-sizing: border-box;

				width: 750rpx;
				padding-left: 0;
				display: flex;
				flex-wrap: wrap;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.tongue-top {
					// border: solid;
					box-sizing: border-box;
					width: 720rpx;

					background-image: url('https://zhinengjiayi.oss-cn-chengdu.aliyuncs.com/home/%E8%88%8C%E8%B1%A1%E6%A3%80%E6%B5%8B%E5%8D%A1%E7%89%87.png');
					background-size: contain;
					background-repeat: no-repeat;

					.trapezoid {
						margin-top: 60rpx;
						text-align: center;

						.trapezoid-content {
							display: flex;
							justify-content: space-around;

							.content-tongue {
								width: 50%;
								font-size: 36rpx;
								font-weight: 600;
							}

							.content-face {
								width: 50%;
								font-size: 36rpx;
								font-weight: 600;
							}
						}
					}

					.tongue-img-content {
						margin-top: 43rpx;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;

						.tongue-down {
							box-sizing: border-box;
							width: 83%;
							display: flex;
							justify-content: space-between;
							margin-top: 33rpx;

							.tongue-img {
								display: flex;
								flex-direction: column;
								align-items: flex-start;
								justify-content: space-around;

								.up {
									font-size: 32rpx;
									font-weight: 400;

									.upspan {
										margin-left: 10rpx;
										font-size: 20rpx;
										font-weight: 400;
									}
								}

								.look {
									padding-bottom: 69rpx;

									font-size: 28rpx;
									font-weight: 400;
									letter-spacing: 0rpx;
									line-height: 40.54rpx;
									color: rgba(223, 161, 60, 1);
									text-align: left;
								}
							}

							.upload {
								width: 370rpx;
								height: 200rpx;
								border-radius: 14rpx;
								background: rgba(243, 243, 245, 1);

								.content {
									// border: solid;
									display: flex;
									align-items: center;
									justify-content: center;
									position: relative;

									.uploads {
										position: absolute;

										.upload-text {
											color: #9e9e9e;
											margin-left: 10rpx;
											display: inline-block;
											width: 144rpx;
											opacity: 1;
											/** 文本1 */
											font-size: 32rpx;
											font-weight: 400;
										}
									}

									.upload-img {
										width: 370rpx;
										height: 200rpx;
										border-radius: 14rpx;
										overflow: hidden;
										display: flex;
										justify-content: center;
										align-items: center;
									}
								}
							}
						}
					}

					.face-img-content {
						margin-top: 43rpx;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;

						.tongue-down {
							box-sizing: border-box;
							width: 83%;
							display: flex;
							justify-content: space-between;
							margin-top: 33rpx;

							.tongue-img {
								display: flex;
								flex-direction: column;
								align-items: flex-start;
								justify-content: space-around;

								.up {
									font-size: 32rpx;
									font-weight: 400;

									.upspan {
										margin-left: 10rpx;
										font-size: 20rpx;
										font-weight: 400;
									}
								}

								.look {
									padding-bottom: 69rpx;
									font-size: 28rpx;
									font-weight: 400;
									letter-spacing: 0rpx;
									line-height: 40.54rpx;
									color: rgba(223, 161, 60, 1);
									text-align: left;
									vertical-align: top;
								}
							}

							.upload {
								width: 370rpx;
								height: 200rpx;
								border-radius: 14rpx;
								background: rgba(243, 243, 245, 1);

								.content {
									// border: solid;
									display: flex;
									align-items: center;
									justify-content: center;
									position: relative;

									.uploads {
										position: absolute;

										.upload-text {
											color: #9e9e9e;
											margin-left: 10rpx;
											display: inline-block;
											width: 144rpx;
											opacity: 1;
											/** 文本1 */
											font-size: 32rpx;
											font-weight: 400;
										}
									}

									.upload-img {
										width: 370rpx;
										height: 200rpx;
										border-radius: 14rpx;
										overflow: hidden;
										display: flex;
										justify-content: center;
										align-items: center;
									}
								}
							}
						}
					}
				}
			}

			// 第四部分
			// <!-- 舌面传图部分 -->
			.tongue-food {
				width: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				position: relative;

				//提交按钮
				.Old-submit {
					width: 310rpx;
					height: 88rpx;
					bottom: 160rpx;
					background: url('https://zhinengjiayi.oss-cn-chengdu.aliyuncs.com/home/detection_btn_infinite_default%404x.png');
					background-size: 100%;
				}

				.submit {
					box-sizing: border-box;
					width: 310rpx;
					height: 88rpx;
					border-radius: 26rpx;
					background-color: rgba(223, 161, 60, 1);
					/** 文本1 */
					font-size: 32rpx;
					font-weight: 500;
					letter-spacing: 0rpx;
					line-height: 85.34rpx;
					color: rgba(255, 255, 255, 1);
					text-align: center;
					vertical-align: top;

					text {
						/** 文本1 */
						font-size: 20rpx;
						font-weight: 500;
						letter-spacing: 0rpx;
						line-height: 90.96rpx;
						color: rgba(255, 255, 255, 1);
						text-align: center;
						margin-left: 20rpx;
					}
				}



				.freeAttentiontext {
					margin-top: 20rpx;
					font-size: 24rpx;
					font-weight: 400;
					letter-spacing: 0rpx;
					color: rgba(85, 85, 87, 1);
					vertical-align: top;
				}

				//兑换码
				.redemptionCode {
					position: absolute;
					width: 100rpx;
					height: 88rpx;
					line-height: 88rpx;
					text-align: center;
					border-radius: 26rpx 0rpx 0rpx 26rpx;
					background: #DFA13C;
					font-size: 32rpx;
					font-weight: 600;
					color: #FFFFFF;
					right: 0;
					top: 0;
				}
			}

			.tongue-attention {
				padding-bottom: 100rpx;
				margin-top: 30rpx;
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				flex-direction: column;
				align-items: center;

				.attention1 {
					font-size: 24rpx;
					font-weight: 700;
				}

				.attention2 {
					margin-top: 20rpx;
					font-size: 24rpx;
					font-weight: 400;
					letter-spacing: 0rpx;
					line-height: 34.76rpx;
					color: rgba(85, 85, 87, 1);
					text-align: left;
					vertical-align: top;
				}

				.attention3 {
					font-size: 24rpx;
					font-weight: 400;
					letter-spacing: 0rpx;
					line-height: 34.76rpx;
					color: rgba(85, 85, 87, 1);
					text-align: left;
					vertical-align: top;
				}
			}
		}

	}
</style>